<template>
    <div id="myChart" style="width: 960px; height: 600px;"></div>
</template>

<script>
import axios from "axios";
import * as echarts from "echarts";

export default {
    name: 'Echarts',
    data() {
        return {
            myChart: null
        };
    },
    mounted() {
        axios.post('http://localhost:8080/barVo').then(r => {
            // 基于准备好的dom，初始化echarts实例
            this.myChart = echarts.init(document.getElementById('myChart'));
            // 绘制图表
            this.myChart.setOption({
                title: {
                    text: '销售报表',
                    left: 'center',
                    top: 20,
                    textStyle: {
                        color: 'rgba(85,85,85,0.6)'
                    }
                },
                tooltip: {},
                xAxis: {
                    name: '月份',
                    data: r.data.map(item => item.month)
                },
                yAxis: {
                    name: '订单量'
                },
                series: [{
                    name: '订单量',
                    type: 'bar',
                    data: r.data.map(item => item.count)
                }]
            });
        });
    }
}
</script>

<style scoped lang="less"> 
#myChart {
     width: 80vw;
     height: 100vh;
     margin: 0 auto;
 }
</style>
